import React from "react";
import { TouchableOpacity, Text, StyleSheet } from "react-native";

interface MySceneProps {
  onPress: () => void;
  text: string;
}

export const MyScene = ({ onPress, text }: MySceneProps) => {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 32,
    paddingVertical: 8,
    backgroundColor: "purple",
    alignSelf: "flex-start",
    borderRadius: 8,
  },
  text: { color: "white", fontSize: 16, fontWeight: "bold" },
});

// import React, { useRef, useEffect } from 'react';
// import { Button, StyleSheet, View } from 'react-native';
// import LottieView from 'lottie-react-native';

// export default function App() {
//   const animation = useRef(null);
//   useEffect(() => {
//     // You can control the ref programmatically, rather than using autoPlay
//     // animation.current?.play();
//   }, []);

//   return (
//     <View style={styles.animationContainer}>
//       <LottieView
//         autoPlay
//         ref={animation}
//         style={{
//           width: 200,
//           height: 200,
//           backgroundColor: '#eee',
//         }}
//         // Find more Lottie files at https://lottiefiles.com/featured
//         source={require('./assets/gradientBall.json')}
//       />
//       <View style={styles.buttonContainer}>
//         <Button
//           title="Restart Animation"
//           onPress={() => {
//             animation.current?.reset();
//             animation.current?.play();
//           }}
//         />
//       </View>
//     </View>
//   );
// }

// const styles = StyleSheet.create({
//   animationContainer: {
//     backgroundColor: '#fff',
//     alignItems: 'center',
//     justifyContent: 'center',
//     flex: 1,
//   },
//   buttonContainer: {
//     paddingTop: 20,
//   },
// });